html.dark{
  .system-mine__header{
    background: url(../../assets/images/me/userCenterBg.png) no-repeat;
  }
}
.system-mine{
  padding-bottom: var(--rem-60);
  .system-mine__header{
    background: url(../../assets/images/me/userCenterBg-light.png) no-repeat;
    background-size: cover;
    h3{
      padding: var(--rem-20) var(--rem-20) 0;
      display: flex;
      font-size: var(--rem-15);
      text-transform: uppercase;
      &>div{
        margin-left: auto;
        border: var(--rem-1) solid var(--z-bg-btn);
        border-radius: var(--rem-24);
        padding: var(--rem-3) var(--rem-10);
        text-align: center;
        font-size: var(--rem-12);
        cursor: pointer;
        color: var(--font-cancel);
      }
    }
    .system-mine__header-user{
      padding-bottom: var(--rem-20);
      .system-mine__header-user-pic{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        img{
          padding: var(--rem-5);
          border: var(--rem-2) solid var(--z-font-def);
          border-radius: 100%;
          width: var(--rem-100);
        }
        span{
          display: block;
          font-size: var(--rem-20);
          color: var(--z-font-anti);
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        em{
          color: var(--font-def);
          font-style: normal;
          i{
            font-style: normal;
            margin: 0 var(--rem-5);
          }
        }
      }
    }
  }
  .sysmte-mine__list{
    margin: var(--rem-24) var(--rem-24) 0;
    padding-bottom: var(--rem-15);
    &:not(:last-child){
      border-bottom: 2px solid var(--z-bg-card);
    }
    dt{
      font-weight: 500;
      text-transform: capitalize;
    }
    ul{
      margin-top: var(--rem-14);
      li{
        display: flex;
        align-items: center;
        .mine-linker__icon{
          width: var(--rem-40);
          height: var(--rem-40);
          border-radius: var(--rem-12);
          display: flex;
          justify-content: center;
          align-items: center;
          background: var(--bg-me-icon);
          margin-right: var(--rem-10);
          svg{
            width: 50%;
            height: 50%;
            color: var(--z-bg-btn);
          }
        }
        .mine-linker__right{
          margin-left: auto;
          &.mine-badge{
            color: white;
            background: #ff6600;
            border-radius: var(--rem-60);
            width: var(--rem-24);
            height: var(-rem-18);
            line-height: var(-rem-18);
            text-align: center;
          }
        }
        &+li{
          margin-top: var(--rem-14);
        }
      }
    }
  }
}
